<extend name="Public:Base" />
<block name="head">
	<script type="text/javascript" src="__PUBLIC__/uploadify/jquery.uploadify.min.js"></script>
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/uploadify/uploadify.css">
</block>
<block name="content">
	<style type="text/css">
		.item{display: inline-block;width: 310px;height: 235px;overflow: hidden;position: relative;}
		.item img{width: 300px;}
		.item .odiv{background: #ccc;display: none;}
		.item h3{background: #333;color: white;position: absolute;height: 25px;top: 210px;width: 300px;}
		.item span{position: absolute;top: 100px;left: 145px;}
		.item span a{text-decoration: none;}
	</style>
	<div class="main-title">
		<h2>七牛文件管理</h2>
	</div>
	<div class="cf">
		<div class="fl">
			<input id="file_upload" name="file" type="file" multiple="true">
			<div id="queue"></div>
		</div>
	</div>
	<div class="data-table table-striped" id="ImageView">
		<volist name="list" id="vo">
			<div class="item" id="Item{$vo.id}">
				<img src="{$vo.savepath}{$vo.savename}" alt="{$vo.name}"/>
				<div class="odiv">
					<h3>{$vo.name}</h3>
					<span><a href="javascript:delPhoto({$vo.id});" class="btn">删除</a></span>
				</div>
			</div>
		</volist>
	</div>
	<div class="page"><div>{$page}</div></div>
</block>
<block name="__body">
	<script>
		function delPhoto(id){
			get('__URL__/delete/id/'+id,function(){ $('#Item'+id).remove();});
		}
		$('.item').hover(
			function(){ $(this).find('.odiv').show();},
			function(){ $(this).find('.odiv').hide();}
		);
		function getFileName(){
			var d=new Date();
			var filename=d.getTime();
			return filename;
		}
		$(function() {
			var filetype = null;
			var filename=getFileName();//'<?php echo getUploadName();?>';
			var now=new Date();
			$('#file_upload').uploadify({
				'onSelect' : function(file){
					filetype = file.type;
					$('#file_upload').uploadify('settings', 'formData', {"key":filename+filetype}) //上传文件的名称
                },
				'fileObjName' : 'file',  //七牛的上传的字段名称是file
				'formData'     : {
                    'token'     : '{$upToken}', //token
                },
				
				'buttonText'  : '选择文件',
				'swf'      : '__PUBLIC__/uploadify/uploadify.swf',
				'uploader' : 'http://up.qiniu.com/',
				'method'   : 'POST',
				'onUploadSuccess' : function(file, data, response) {
					//console.info(file);
					data=$.parseJSON(data);
					//console.info(data);
                    if(data.key!==""){
                    	$.ajax({
                    		url:'__URL__/saveAttach',
                    		data:'savename='+data.key+'&size='+file.size+'&name='+file.name+'&hash='+data.hash+'&extension='+file.type.replace('.',''),
                    		type:'POST'
                    	});
                    	var html='<div class="item"><img src="http://sssui.u.qiniudn.com/'+data.key+'" alt="'+file.name+'"/><div class="odiv"><h3>'+file.name+'</h3></div></div>';
						$("#ImageView").prepend(html);
					}else{
						alert("<font style='color:red;bolid;font:700 14px Arial, Helvetica, sans-serif;'>上传失败，请联系管理员！</font>");
					}
                 },
			});
		});
	</script>
</block>